<template>
  <a-modal width="1352px" :visible="visible" title="预览目录" @cancel="handleCancel">
    <a-row :gutter="20">
      <a-col :span="12">
        <!-- 预览目录 -->
        <div class="border border-gray-200 shadow-md rounded-md py-4 px-2">
          <DynamicForm :config="dyTitleConfig" :questions="dyTitleQuestions" />
          <DynamicTable :config="dyListConfig" :tables="dyListTables" ref="listRef" />
        </div>
      </a-col>
      <a-col :span="12">
        <!-- 档案详情 -->
        <div class="border border-gray-200 shadow-md rounded-md py-4 px-2 h-full">
          <DynamicForm v-show="dyDetailConfig.data" :config="dyDetailConfig" :questions="dyDetailQuestions" ref="detailRef" />
          <a-empty class="!m-0 absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2" v-show="!dyDetailConfig.data" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
        </div>
      </a-col>
    </a-row>
    <template #footer>
      <a-button key="back" @click="handleCancel">返回</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onBeforeUnmount, reactive, ref } from 'vue';
import { DynamicForm, DynamicTable } from '@/components/public-template';
import previewService from './previewDialog.service';
import { message } from 'ant-design-vue';
import { Api } from '@/config/api/archives';
import { Empty } from 'ant-design-vue';
import { filter } from 'rxjs/operators';
import { DYNAMICLTABLECLICKROW } from '@/mixins/subject/subject-types';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object
  }
});
const emit = defineEmits(['update:visible']);
const state = reactive({
  count: 1
});
const listRef = ref(null);
const detailRef = ref(null);
const dyTitleConfig: any = { cancelSave: true };
const dyTitleQuestions = reactive(previewService.getTitleQuestions());
const dyListConfig: any = reactive({
  name: 'listTable',
  queryUrl: Api.boxPreviewCatalog,
  protType: 'post',
  noPagination: true,
  rowClick: true,
  rowClickId: '',
  params: {
    boxId: props.data.id
  },
  beforeWithMethod: (data) => {
    initData(data);
    return data;
  }
});
const dyListTables: any = reactive(previewService.getListTables());
const dyDetailConfig: any = reactive({
  name: 'detailForm',
  labelCol: 24,
  wrapperCol: 24,
  grid: 8,
  layout: 'vertical',
  cancelSave: true,
  data: null
});
const dyDetailQuestions = reactive(previewService.getDetailQuestions(props.data.attachment?.archiveFileId));
//监听table
const { proxy }: any = getCurrentInstance();
const subscribeSub = proxy.$NotificationPubSub
  .getParams()
  .pipe(filter((res) => res !== 0))
  .subscribe((item: any) => {
    if (item.key === DYNAMICLTABLECLICKROW) {
      dyDetailConfig.data = item.value.data;
      detailRef.value.getData();
    }
  });
function initData(list) {
  // 默认选择第一条
  if (Array.isArray(list) && list.length > 0) {
    list.forEach((item) => {
      item.boxCode = props.data.code;
      item.boxName = props.data.boxName;
      item.boxDesc = props.data.name;
    });
    listRef.value.selectedRowIndex = list[0].id;
    dyDetailConfig.data = list[0];
    detailRef.value.getData();
  }
}

function handleCancel() {
  emit('update:visible', false);
}

onBeforeUnmount(() => {
  subscribeSub && subscribeSub.unsubscribe();
  proxy.$NotificationPubSub.clearParams();
});
</script>

<style lang="less" scoped>
.selected-row {
  background-color: blue;
  color: white;
}
.custom-row {
  cursor: pointer;
}
</style>
